<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts使用例子</title>
		<style>
			body,div,p,a{
				margin: 0;
				padding: 0;
			}
			body,html,#box{
				width: 100%;
				height: 100%;
				background: #ccc;
			}
			#studyEff{
				width: 90%;
				height: 40%;
				background: white!important;
				position: absolute;
				top: 5%;
				left: 5%;
			}
			#act{
				width: 90%;
				height: 40%;
				background: white!important;
				position: absolute;
				top: 55%;
				left: 5%;
			}
			#left{
				width: 80px;
				height: 80px;
				position: absolute;
				top: 45%;
				left: 60px;
				z-index: 9999999999999;
				opacity: 0.1;
			}
			#right{
				width: 80px;
				height: 80px;
				position: absolute;
				top: 45%;
				right: 76px;
				z-index: 9999999999999;
				opacity: 0.1;
			}
			#left:hover,#right:hover{
				opacity: 0.5;
			}
			#mask{
    			width:100%;
    			height:100%;
    			position:fixed;
    			top:0;
    			left:0;
    			display: none;
    			z-index:9999999;
    			background:#ccc;
    		}
    		#mask-body{
	    		position: absolute;
	    		top: 100px;
	    		left: 50px;
	    		height: 800px;
				border: 1px solid black;
				background: white!important;
				opacity: 1;
	    		z-index: 99;
	    	}
	    	#mask-header{
	    		position: absolute;
	    		top: 50px;
	    		left: 50px;
	    		height: 50px;
				border: 1px solid black;
				background: white!important;
				opacity: 1;
	    		z-index: 999;
	    	}
	    	#mask-header>button{
	    		padding: 3px;
	    		border: 1px solid black;
	    		position: absolute;
	    		right: 15px;
	    		top: 10px;
	    		cursor: pointer;
	    	}
	    	#mask-header>button:hover{
	    		background: #ccc;
	    	}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="studyEff"></div>
			<div id="act"></div>
		</div>
		<div id="mask" style="width: 100%;height:100%;">
	    	<div id="mask-header">
	    		<button>退出</button>
	    	</div>
	    	<div id="mask-body"></div>
	    	<div id="left"><img src="img/left.png"></div>
			<div id="right"><img src="img/right.png"></div>
	   	</div>
		<script src="js/echarts.js"></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script>
			$("#mask-body").width($(document.body).width()-100);
	    	$("#mask-header").width($(document.body).width()-100);
	    	$("#mask-header>button").click(function(){
	    		$("#mask").css('display',"none");
	    	});
	    	var mask;
	    	var bigArr=[];//这个数组是为了装大分类的
	    	var smallArr=[];//这个数据是为了装小分类的
	    	var allArr=[];//这个数组是为了装所有分类的
			var actArr=[
				{value:335, name:'视频',data:[
					{value:165, name:'优酷'},
	                {value:170, name:'爱奇艺'}
				]},
	           	{value:679, name:'休闲',data:[
	           		{value:310, name:'游戏'},
	                {value:234, name:'购物'},
	                {value:135, name:'阅读'}
	           	]},
	            {value:1548, name:'学习',data:[
	            	{value:1048, name:'WPS'},
	                {value:251, name:'有道词典'},
	                {value:147, name:'百度搜索'},
	                {value:102, name:'其他'}
	            ]}   
	        ];
			//对actArr数据进行处理
			actArr.forEach(function(item){
				bigArr.push({value:item.value,name:item.name});
				allArr.push(item.name);
				item.data.forEach(function(_item){
					smallArr.push({value:_item.value,name:_item.name});
					allArr.push(_item.name);
				});
			});
			
			
			mychart_first("studyEff",['海滨中学','深圳实验中学','深圳市文龙学校','深圳中学','深圳市兴泰实验学校','深圳市坪西学校','深圳市华城学校','深圳中学初中部','深圳市旱塘学校','深圳高级中学初中部'],[85, 88, 75, 71, 88, 90, 72,81,82,73],'学习效率统计',"学习效率");
			mychart_five("act","所有",allArr,bigArr,smallArr);
			function mychart_first(id,data1,data2,title,barName,maskBody){
	            var first = echarts.init(document.getElementById(id));   
	            var option_second = {  
	                title: {   
	                    text: title, 
	                    x: 'left',  
	                    y: 'top'  
	                },  
	                tooltip : {
				        formatter: "平均学习效率  ：81分"
				    },

	                legend: {  
	                    show: true,  
	                    x: 'center',  
	                    y: 'top',  
	                    data: [barName]  
	                },  
	                toolbox: {  
	                    show: true,  
	                    feature: {   
	                        dataZoom: {  
	                            show: true 
	                        },
	                        restore: {show: true},  
	                        dataView: {show: true, readOnly: true},  
	                        magicType: {show: true, type: ['line', 'bar']},  
	                        saveAsImage: {show: true},
	                        myTool2: {
				                show: true,
				                title: '全屏显示',
				                icon: 'image://img/fullscreen.png',
				                onclick: function (){
				                    $("#mask").css("display","block");
				                    mychart_first("mask-body",data1,data2,title,barName);
				                    if(maskBody){
				                    	mask=first;
				                    }
				                }
				            }
	                    }  
	                }, 
	                calculable: true,  
	               	xAxis : [
				        {
				            type : 'category',
				            axisLabel:{  
	                         	interval:0,
	                         	rotate:-10

		                   },
				           data : data1
				        }
				    ],
	                yAxis: [  
	                    {  
	                        show: true,  
	                        type: 'value', 
	                        splitArea: {show: true}  
	                    }  
	                ],  
	                series: [  
	                    {  
	                        name: barName,    
	                        type: 'bar',  
	                        itemStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#83bff6'},
				                            {offset: 0.5, color: '#188df0'},
				                            {offset: 1, color: '#188df0'}
				                        ]
				                    )
				                },
				                emphasis: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#2378f7'},
				                            {offset: 0.7, color: '#2378f7'},
				                            {offset: 1, color: '#83bff6'}
				                        ]
				                    )
				                }
				            },
	                        data: data2,
	                        label: {
				                normal: {
				                    show: true,
				                    position: 'top',
				                    textStyle:{
				                    	color:"black"
				                    }
				                }
				            },
				            markLine : {
				                data : [
				                    {type: 'average', name: "平均线"}
				                ],
				                label: {
					                normal: {
					                    show: true,
					                    position: 'top',
					                    textStyle:{
					                    	color:"black"
					                    }
					                }
					            }
				            }
	                    }
	                ]  
	            };   
	            first.setOption(option_second);
	            if(maskBody){
	            	mask=first;
	            };
	            first.on("click",function(params){
	            	console.log(params);
	            	if(params.componentType=="markLine"){
	            		mychart_five("act","所有",allArr,bigArr,smallArr);
	            	}else if(params.componentType=="series"){
	            		mychart_five("act",params.name,allArr,bigArr,smallArr);
	            	};
	            });
            };
            function mychart_five(id,name,allArr,bigArr,smallArr,maskBody){
				var five = echarts.init(document.getElementById(id));
				var	option_five = {
					title: {  
	                    text: "活动分类"+"["+name+"]",    
	                    x: 'left',    
	                    y: 'top'  
	                },  
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: '10',
				        y:"50",
				        //data:['优酷','爱奇艺','视频','休闲','学习','游戏','购物','阅读','WPS','有道词典','百度搜索','其他']
				    	data:allArr
				    },
				    toolbox: {  
	                    //显示策略，可选为：true（显示） | false（隐藏），默认值为false  
	                    show: true,  
	                    //启用功能，目前支持feature，工具箱自定义功能回调处理  
	                    feature: {   
	                        //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  
	                        dataView: {show: true, readOnly: true},  
	                          
	                        //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  
	                        saveAsImage: {show: true},
	                        myTool2: {
				                show: true,
				                title: '全屏显示',
				                icon: 'image://img/fullscreen.png',
				                onclick: function (){
				                    $("#mask").css("display","block");
				                    mychart_five("mask-body",name,allArr,bigArr,smallArr);
				                    if(!maskBody){
				                    	mask=five;
				                    }
				                }
				            }
	                    }  
	                },  
				    series: [
				        {
				            name:'大分类',
				            type:'pie',
				            selectedMode: 'single',
				            radius: [0, '30%'],
				            label: {
				                normal: {
				                    position: 'inner'
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
//				            data:[
//				                {value:335, name:'视频', selected:true},
//				                {value:679, name:'休闲'},
//				                {value:1548, name:'学习'}
//				            ]
							data:bigArr
				        },
				        {
				            name:'小分类',
				            type:'pie',
				            radius: ['40%', '55%'],
//				            data:[
//				                {value:165, name:'优酷'},
//				                {value:170, name:'爱奇艺'},
//				                {value:310, name:'游戏'},
//				                {value:234, name:'购物'},
//				                {value:135, name:'阅读'},
//				                {value:1048, name:'WPS'},
//				                {value:251, name:'有道词典'},
//				                {value:147, name:'百度搜索'},
//				                {value:102, name:'其他'}
//				            ]
							data:smallArr
				        }
				    ]
				};
				five.setOption(option_five);
				five.on("click",function(params){
					console.log(params);
				});
				
				five.on('legendselectchanged', function (params) { 
					console.log(params);
					console.log(five.getOption());
					var _fiveOption=five.getOption();
					for(var i=0;i<actArr.length;i++){
						var _item=actArr[i].name;
						if(params.name==_item){
							actArr[i].data.forEach(function(name){
								_fiveOption.legend[0].selected[name.name]=_fiveOption.legend[0].selected[_item];
							});
						}else{
							actArr[i].data.forEach(function(name){
								if(params.name==name.name){
									//console.log(name.Value);
									//console.log(_fiveOption.series[0].data[i].value);
									if(_fiveOption.legend[0].selected[name.name]){
										_fiveOption.legend[0].selected[_item]=true;
										_fiveOption.series[0].data[i].value+=name.value;
										if(_fiveOption.series[0].data[i].value>actArr[i].value){
											_fiveOption.series[0].data[i].value-=actArr[i].value;
										}
									}else{
										_fiveOption.series[0].data[i].value-=name.value;
										if(_fiveOption.series[0].data[i].value==0){
											_fiveOption.legend[0].selected[_item]=false;
										}
									}
									
								}
							})
						}
					}
					five.setOption(_fiveOption);
				});
				if(maskBody){
					mask=five;
				}
           	};
        	
        	$("#right").click(function(){
        		console.log(mask.getOption());
        		if(mask.getOption().title[0].text.indexOf("活动分类")!=-1){
			        mychart_first("mask-body",['海滨中学','深圳实验中学','深圳市文龙学校','深圳中学','深圳市兴泰实验学校','深圳市坪西学校','深圳市华城学校','深圳中学初中部','深圳市旱塘学校','深圳高级中学初中部'],[85, 88, 75, 71, 88, 90, 72,81,82,73],'学习效率统计',"学习效率","mask");
				}else if(mask.getOption().title[0].text.indexOf("学习效率统计")!=-1){
					mychart_five("mask-body","所有",allArr,bigArr,smallArr,"mask");
				}
        	});
        	
        	$("#left").click(function(){
        		console.log(mask.getOption());
        		if(mask.getOption().title[0].text.indexOf("活动分类")!=-1){
			        mychart_first("mask-body",['海滨中学','深圳实验中学','深圳市文龙学校','深圳中学','深圳市兴泰实验学校','深圳市坪西学校','深圳市华城学校','深圳中学初中部','深圳市旱塘学校','深圳高级中学初中部'],[85, 88, 75, 71, 88, 90, 72,81,82,73],'学习效率统计',"学习效率","mask");
				}else if(mask.getOption().title[0].text.indexOf("学习效率统计")!=-1){
					mychart_five("mask-body","所有",allArr,bigArr,smallArr,"mask");
				}
        	});
        	
		</script>
	</body>
</html>